// 账户登录组件
// 引入 hook 函数
import React, { useState, useRef } from 'react';
// 引入验证码组件
import Captcha from '@/components/Captcha'
// 引入 antd 图标组件
import { LockOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
// 引入 antd 样式组件
import { Button, Form, Input, Space, message } from 'antd';
// 账户登录接口
import { normalLogin } from '@/api/login'
// 操作 redux 的 hook 组件
import { useSelector, useDispatch } from 'react-redux';
// 路由相关的 hook 组件
import { useHistory } from 'react-router-dom';

const NomolLogin = () => {
  const [key, setKey] = useState('')
  // redux state 数据
  // const state = useSelector(state => state)
  // 创建 dispatch 方法
  const dispatch = useDispatch()
  // 创建 his 方法
  const his = useHistory()
  // 创建 ref 对象
  const ref1 = useRef()
  // 获取form 表单实例(antd form 表单提供的方法)
  const [form] = Form.useForm();

  const onFinish = (values) => {
    values.key = key
    // console.log('Success:', values);
    // 调用登录接口
    normalLogin(values).then(res => {
      console.log(res)
      // 1 jwt 存到本地
      // 2 acl 存到 redux (持久化)
      if (res.data.errNo === 0) {
        // 登陆成功
        dispatch({ type: 'updataAcl', payload: res.data.context.acl })
        // 提示登陆成功
        message.success('登陆成功', 1, () => {
          // 跳转到首页
          his.push('/dashboard')
        })
      } else {
        // 登陆失败
        // 自动更新验证码
        // console.log('登陆失败', ref1)
        ref1.current.getCaptcha()
        message.error(res.data.errText, 1, () => {
          form.setFieldsValue({
            username: '',
            password: '',
            captcha: ''
          })
        })

      }
      // console.log(state)
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // key
  const savekey = (key) => {
    setKey(key)
  }
  return (
    <div>
      <Form
        name="basic"
        wrapperCol={{
          span: 24,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        size='large'
        form={form}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: '请输入账户名!',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>

        <Space>
          <Form.Item
            name="captcha"
            rules={[
              {
                required: true,
                message: '请输入验证码!',
              },
            ]}
          >
            <Input
              prefix={<KeyOutlined className="site-form-item-icon" />}
              placeholder="captcha"
            />
          </Form.Item>
          <Form.Item>
            {/* 验证码组件 */}
            <Captcha ref={ref1} height={38} savekey={savekey} ></Captcha>
          </Form.Item>
        </Space>

        <Form.Item
          wrapperCol={{
            span: 24,
          }}
        >
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default NomolLogin;
